<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .todo-list {
      list-style-type: none;
      width: 500px;
      border: 1px solid gray;
      padding: 20px;
    }

    .todo-list>li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      display: flex;
      /*使用弹性布局*/
      flex-direction: row;
      /*布局的成员在一行里面显示*/
      justify-content: space-around;
      /*每一个成员左右都有margin分隔开*/
    }
  </style>
</head>

<body>

  <div id="app">
    <h1> {{title}}</h1>
    <div>
      <input type="text" placeholder="请输入实项名称" v-model="content">
      <button type="button" @click="addTodo">添加事项</button>
      <div>
        你输入的内容是：{{content}}
      </div>
    </div>
    <hr>
    <ul class="todo-list">
      <li v-for="(item,index) in  todoList" v-if="item.tstate==false">
        <div>{{index + 1}}</div>
        <div>{{item.tname}}</div>
        <div>{{item.time}}</div>
        <div>{{item.tstate===true?'已完成':'未完成'}}</div>
        <div>
          <button type="button" @click="deleteTodo(item.tid,$event)">delete</button>
          <button type="button" @click="updateTodoState(item.tid,$event)">完成</button>
        </div>

      </li>
    </ul>
    <h1> {{title2}}</h1>
    <hr>
    <ul class="todo-list">
      <li v-for="(item,index) in  todoList" v-if="item.tstate==true">
        <div>{{index + 1}}</div>
        <div>{{item.tname}}</div>
        <div>{{item.time}}</div>
        <div>{{item.tstate===true?'已完成':'未完成'}}</div>
        <div>
          <button type="button" @click="deleteTodo(item.tid,$event)">delete</button>
          <button type="button" @click="updateTodoState(item.tid,$event)">未完成</button>

        </div>

      </li>
    </ul>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    // console.log(Vue);
    let vm = new Vue({
      el: "#app",
      data: {
        title: '待办事项',
        title2: '已完成的事项',
        tid: 5,
        todoList: [
          { tid: 1, tname: '吃早饭', time: '2023-4-25', tstate: true },
          { tid: 2, tname: '打上班卡', time: '2023-4-25', tstate: true },
          { tid: 3, tname: '提交代码', time: '2023-4-25', tstate: false },
          { tid: 4, tname: '吃午饭', time: '2023-4-25', tstate: false },
          { tid: 5, tname: '下班打卡', time: '2023-4-25', tstate: false },
        ],
        content: ''
      },
      methods: {
        // 删除todo
        deleteTodo(tid, event) {
          /*          
             console.log(tid);
            console.log(event);
            console.log(this.todoList); // 获取data对象里面的属性。this.属性名
            console.log(this)  // 执行当前vue组件实列化对象
  
            使用filter过滤不满足条件的数据：
            每一个tid 不等于 目标TID,就保留。相等的，就不保留。
          */

          this.todoList = this.todoList.filter(el => el.tid !== tid);
        },
        // 修改todo的状态
        updateTodoState(tid, event) {
          // 1. 一般可以直接循环判断，该数据
          // this.todoList.forEach(el => {
          //   if (el.tid === tid) {
          //     el.tstate = !el.tstate;
          //   }
          // })

          //2. 如果第一种方法失败，就使用深拷贝，深克隆
          let arr = JSON.parse(JSON.stringify(this.todoList));
          arr.forEach(el => {
            if (el.tid === tid) {
              el.tstate = !el.tstate;
            }
          })
          // 反向赋值
          this.todoList = arr;

        },
        // 添加todo
        addTodo() {
          // console.log(this.content)
          this.tid++;
          let obj = { tid: this.tid, tname: this.content, time: new Date().toLocaleDateString(), tstate: false };
          this.todoList.unshift(obj)
        }
      },
      computed: {},
      watch: {}
    })

  </script>
</body>

</html>